<script lang="ts" setup>
// 联营计算器
import { ref, computed } from "vue";

import { Search } from "@element-plus/icons-vue";

// top头部 搜索 方案名称
const input2 = ref("");
import type { DropdownInstance } from "element-plus";

const dropdown1 = ref<DropdownInstance>();

function showClick() {
  if (!dropdown1.value) return;
  dropdown1.value.handleOpen();
}
// tab切换
const value = ref("Mon");
const options = ["全部", "自建方案", "关联方案"];

//开始时间
const kaishivalue = ref("");
const holidays = [
  "2021-10-01",
  "2021-10-02",
  "2021-10-03",
  "2021-10-04",
  "2021-10-05",
  "2021-10-06",
  "2021-10-07",
];

const isHoliday = ({ dayjs }) => {
  return holidays.includes(dayjs.format("YYYY-MM-DD"));
};

//结束时间
const jieshuvalue = ref("");
const jieshuholidays = [
  "2021-10-01",
  "2021-10-02",
  "2021-10-03",
  "2021-10-04",
  "2021-10-05",
  "2021-10-06",
  "2021-10-07",
];
const jieshuisHoliday = ({ dayjs }) => {
  return jieshuholidays.includes(dayjs.format("YYYY-MM-DD"));
};

//表格
interface User {
  date: string;
  name: string;
  address: string;
}

const search = ref("");
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);
const handleEdit = (index: number, row: User) => {
  console.log(index, row);
};
const handleDelete = (index: number, row: User) => {
  console.log(index, row);
};
const tableData: User[] = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "John",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Morgan",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Jessy",
    address: "No. 189, Grove St, Los Angeles",
  },
];

//分页
const currentPage4 = ref(4);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};

//弹框
let dialogVisible=ref(false)

</script>

<template>
  <el-card style="max-width: 100%; height: 100%">
    <div>
      <!-- top头部 -->
      <div class="top">
        <div>
          <el-dropdown
            ref="dropdown1"
            trigger="contextmenu"
            style="margin-right: 30px"
          >
            <el-button class="el-dropdown-link" @click="showClick">
              新建方案</el-button
            >
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="dialogVisible = true">导入已有店铺数据</el-dropdown-item>
                <el-dropdown-item>新建自建方案</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <!-- //搜索框 -->
        <div>
          <span>关键字：</span>
          <el-input
            v-model="input2"
            style="width: 240px"
            placeholder="Please Input"
            :suffix-icon="Search"
          />
        </div>
        <!-- tab切换 -->
        <div class="custom-style">
          <span>方案类型：</span>
          <el-segmented v-model="value" :options="options" size="large" />
        </div>

        <!-- 创建时间 -->
        <div class="shijian">
          <span>创建时间</span>
          <div class="kaijie">
            <!-- 开始时间 -->
            <div class="demo-date-picker">
              <el-date-picker
                v-model="kaishivalue"
                type="date"
                placeholder="开始时间"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
              >
                <template #default="cell">
                  <div class="cell" :class="{ current: cell.isCurrent }">
                    <span class="text">{{ cell.text }}</span>
                    <span v-if="isHoliday(cell)" class="holiday" />
                  </div>
                </template>
              </el-date-picker>
            </div>
            <!-- 结束时间 -->
            <div class="demo-date-picker">
              <el-date-picker
                v-model="jieshuvalue"
                type="date"
                placeholder="结束时间"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
              >
                <template #default="cell">
                  <div class="cell" :class="{ current: cell.isCurrent }">
                    <span class="text">{{ cell.text }}</span>
                    <span v-if="jieshuisHoliday(cell)" class="holiday" />
                  </div>
                </template>
              </el-date-picker>
            </div>
          </div>

          <!-- 清空 -->
          <button class="qingkong">清空</button>
        </div>
      </div>

      <!-- 表格 -->
      <div style="margin-top: 40px">
        <el-table
          :data="filterTableData"
          style="width: 100%; display: flex; text-align: center"
          :header-row-style="{ height: '50px', color: 'black' }"
          :header-cell-style="{ background: '#f2f2f2' }"
        >
          <el-table-column
            fixed
            label="方案名称"
            prop="date"
            width="200px"
            #default="scope"
          >
            <div style="color: #626aef">{{ scope.row.date }}</div>
          </el-table-column>

          <el-table-column />
          <el-table-column
            label="创建时间"
            prop="name"
            width="200px"
            sortable
          />
          <el-table-column label="方案类型" prop="date" width="200px" />

          <el-table-column label="关联项目" prop="name" width="200px" />
          <el-table-column label="店铺数量" prop="date" width="200px" />
          <el-table-column
            label="方案说明"
            prop="name"
            width="200px"
            #default="scope"
          >
          <!-- 提示框 -->
            <el-tooltip
              :content="scope.row.address"
              effect="light"
              placement="bottom-start"
            >
              <div  class="tooltip">{{ scope.row.address }}</div>
            </el-tooltip>
          </el-table-column>
          <el-table-column align="center" label="操作" width="250px">
            <template #default="scope">
              <el-button
                text
                size="small"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
              >
                复制方案
              </el-button>
              <el-button
                size="small"
                text
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->

      <div
        class="demo-pagination-block"
        style="width: 100%; margin-top: 40px; margin-left: 450px"
      >
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </el-card>


        <!-- 弹框 -->
        <el-dialog
            v-model="dialogVisible"
            title="导入店铺创建方案"
            width="500"
        >
            <span>

                    

            </span>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                Confirm
                </el-button>
            </div>
            </template>
        </el-dialog>

</template>

<style lang="less" scoped>
.container {
  display: inline-block;
  position: relative;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.hover-text {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100px;
  transform: translateX(-50%);
  padding: 8px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.container:hover .hover-text {
  display: block;
}

//头部 top
.top {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 10px;
}

// //tab切换
// .custom-style {
//   --el-segmented-card-height: 30px;
//   --el-segmented-card-font-size: 14px;
// }

//时间
.shijian {
  display: flex;
  align-items: center;
}
.kaijie {
  display: flex;
  align-items: center;
}

.demo-date-picker .el-input__inner {
  width: 60px;
}
.el-tooltip__trigger .el-input__wrapper {
  width: 60px;
}

//分页
.demo-pagination-block {
  margin-top: 30px;
  margin: 0 auto;
}

.qingkong {
  width: 60px;
  height: 30px;
  background-color: #fff;
  color: #ec808d;
  border: 1px solid #ec808d;
  border-radius: 5px;
}

// 设置单行文本
.tooltip{
     white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


</style>
